<template>
    <div>
        <div>
            <headerTop></headerTop>
        </div>
        <div>
            <headerMin :searchState="searchState"></headerMin>
        </div>
        <div class="doctor_content wrap">
            <div class="indexes">首页</div>
            <div class="navList">
                <div class="navList1">
                    <div>
                        选择科室
                        <i></i>
                    </div>
                    <div
                            @click="navTab1(v,i)"
                            :class="{navActive1:arrList1Class == i}"
                            class="tab"
                            v-for="(v,i) in arrList1"
                            :key="i"
                    >{{v.category_name}}
                    </div>
                    <div class="tab">
                        展开
                        <img src="@/assets/image/Listofpeople_Open_icon@2x.png" alt/>
                    </div>
                </div>
                <div class="navList1">
                    <div>
                        二级科室
                        <i></i>
                    </div>
                    <div
                            @click="navTab2(v,i)"
                            :class="{navActive1:arrList2Class == i}"
                            class="tab"
                            v-for="(v,i) in arrList2"
                            :key="i"
                    >{{v.category_name}}
                    </div>
                    <div class="tab">展开</div>
                </div>
            </div>
            <!-- 背景 -->
            <div class="navListbg"></div>
            <!-- 医生选择 -->
            <div class="selectTab">
                <!-- 列表 -->
                <div v-for="(v,i) in doctorList" :key="i" @click="GoDoctorDetails(v)" class="box">
                    <div v-if="v.waiting_num == 0" class="sum">空闲</div>
                    <div v-if="v.waiting_num != 0" class="sum sumNum">{{v.waiting_num}}人排队</div>
                    <div class="headerImg">
                        <img src="@/assets/image/bg1.jpg" alt/>
                    </div>
                    <p class="p1">
                        <span>{{v.realname}}</span>
                        {{v.job_name}}
                    </p>
                    <p class="p2 two">{{v.category_name}}</p>
                    <p class="p3 two">{{v.zizhi_desc}}</p>
                    <div class="bottom">
                        <div>
                            <img class="fl" src="@/assets/image/Listofpeople_picture_icon@2x.png" alt/>
                            <div class="fl ffl">
                                <p class="txt1">图文问诊</p>
                                <p class="txt2">免费</p>
                            </div>
                        </div>
                        <div>
                            <img class="fl" src="@/assets/image/Listofpeople_video_icon@2x.png" alt/>
                            <div class="fl ffl">
                                <p class="txt1">视频问诊</p>
                                <p class="txt2">免费</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg1">
            <publicBottom></publicBottom>
        </div>
    </div>
</template>
<script>
    import headerTop from "@/components/public/public_headerTop.vue";
    import headerMin from "@/components/index/index_header_min";
    import publicBottom from "@/components/public/public_bottom.vue";
    import {getOnlineList} from "@/request/index"; // 获取在线医生列表
    import {getCategoryList} from "@/request/index"; //科室 列表
    export default {
        components: {
            headerTop,
            headerMin,
            publicBottom
        },
        props: [],
        data() {
            return {
                searchState: 0,
                search: "",
                arrList1: [], // 1级科室 列表
                arrList1Class: -1, // 1级科室 的样式
                arrList2Class: -1, // 2级科室 的样式
                arrList2: [], // 2级 科室 的列表
                doctorList: [], // 医生列表
                websock: null,
                path: "ws://lianzhong_ws.jzbwlkj.com",
                socket: ""
            };
        },
        created() {
            this.start();
            this.initWebSocket();
        },
        destroyed() {
            // this.websock.close(); //离开路由之后断开websocket连接
        },
        methods: {
            initWebSocket() {
                //初始化weosocket
				// 1. 连接
                const wsuri = "ws://lianzhong_ws.jzbwlkj.com";
                this.websock = new WebSocket(wsuri);
		
                this.websock.onopen = this.websocketonopen;
				// 回调
                this.websock.onmessage = this.websocketonmessage;
				// 报错
                this.websock.onerror = this.websocketonerror;
				// 断开
                this.websock.onclose = this.websocketclose;
                // 心跳
                setInterval(() => {
                    this.websocketsend(
                        {
                            method: 'ping'
                        }
                    )
                }, 3000)
            },
            websocketonopen() {
				// 发送
                //连接建立之后执行send方法发送数据
                this.websocketsend();
            },
            websocketonerror() {
                //连接建立失败重连
                this.initWebSocket();
            },
            websocketonmessage(e) {
                //数据接收
                const redata = JSON.parse(e.data);
                // 处理消息
                switch (redata.method) {
                    // 登陆用户
                    case 'sys':
                        this.userlogin();
                        break;
                }
            },

            // userlogin
            userlogin() {
                let actions = {
                    method: "login",
                    token: this.$user.token
                };
                this.websocketsend(JSON.stringify(actions));
            },

            websocketsend(Data) {
                //数据发送
                this.websock.send(Data);
            },
            websocketclose(e) {
                //关闭
                alert("断开连接", e)
            },
            //  1级 科室的 点击
            navTab1(e, i) {
                // 点击 列表 获取二级科室
                this.arrList1Class = i;
                getCategoryList({
                    pid: e.id
                }).then(res => {
                    this.arrList2 = res.data;
                });
                //  点击列表 获取 医生
                getOnlineList({
                    cert_type: 1,
                    category_id: e.id
                }).then(res => {
                    this.doctorList = res.data;
                });
            },
            start() {
                //  科室分类
                getCategoryList({}).then(res => {
                    this.arrList1 = res.data;
                });
                // 医生 列表
                getOnlineList({
                    cert_type: 1
                }).then(res => {
                    this.doctorList = res.data.data;
                });
            },
            //  2级 科室 的 点击
            navTab2(e, i) {
                // 点击 列表 获取二级科室
                this.arrList2Class = i;
                //  点击列表 获取 医生
                getOnlineList({
                    cert_type: 1,
                    category_id: e.id
                }).then(res => {
                    this.doctorList = res.data;
                });
            },
            GoDoctorDetails(v) {
                this.$router.push({path: "/doctor/doctorDetails?id=" + v.id+'&uid='+v.uid});
            },
            GoAllGoods() {
                this.$router.replace({path: "/allGoods"});
            }
        }
    };
</script>
<style lang="less" scoped>
    @import "./doctor";
</style>